<template>
  <div class="mi-review-container">
    <div v-for="(item, index) in reviewList" :key="index" class="mi-review-card">
      <!-- 用户信息头部 -->
      <div class="mi-review-header">
        <div class="user-info">
          <span class="user-name">{{ item.truename || '匿名用户' }}</span>
          <span class="review-date">{{ formatDate(item.created_at) }}</span>
        </div>
        <!-- 仅在存在图片时显示图片 -->
        <img v-if="item.img" :src="`http://127.0.0.1:3000/reviews/${item.img}`" alt="用户评论图片" class="review-image">
        <div class="user-tag" v-if="item.is_super">超级</div>
      </div>

      <!-- 评论内容 -->
      <div class="mi-review-content">
        {{ item.contents }}
      </div>

      <!-- 嵌套回复列表 -->
      <div class="mi-review-replies">
        <div v-for="(reply, replyIndex) in item.replies" :key="replyIndex" class="mi-reply-card">
          <div class="mi-reply-header">
            <span class="user-name">{{ reply.truename || '匿名用户' }}</span>
            <span class="reply-date">{{ formatDate(reply.created_at) }}</span>
          </div>
          <div class="mi-reply-content">
            {{ reply.contents }}
          </div>
        </div>
      </div>

      <!-- 回复表单 -->
      <div class="mi-review-reply-form" v-if="item.showReplyForm">
        <textarea v-model="item.replyContent" placeholder="回复内容" class="reply-textarea"></textarea>
        <button @click="submitReply(item)" class="reply-submit-btn">提交回复</button>
      </div>

      <!-- 底部信息 -->
      <div class="mi-review-footer">
        <div class="review-id">
          <span>NO.{{ item.rvid.toString().padStart(5, '0') }}</span>
          <span class="user-location">{{ item.location || 'Xiaowai HSE, Pnr.' }}</span>
        </div>
        <div class="review-actions">
          <button class="reply-btn" @click="toggleReplyForm(item)">回复</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from '../../api/axios'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const reviewList = ref([])
const route = useRoute()

const formatDate = (dateString) => {
  if (!dateString) return '2025-06-17'
  const date = new Date(dateString)
  return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}

// 获取评论列表
axios.post('/api/reviews/reviewsBygid', {gid: route.query.gid}).then(res => {
  if(res.data.code == 200) {
    reviewList.value = res.data.reviews.map(review => ({
      ...review,
      showReplyForm: false,
      replyContent: '',
      replies: [] // 初始化嵌套回复列表
    }))
    console.log(reviewList.value)
  } else {
    alert(res.data.msg)
  }
})

// 切换回复表单显示
const toggleReplyForm = (item) => {
  item.showReplyForm = !item.showReplyForm
  item.replyContent = '' // 清空回复内容
}

// 提交回复
const submitReply = (item) => {
  if (!item.replyContent.trim()) {
    alert('回复内容不能为空')
    return
  }

  // 假设有一个API来提交回复
  axios.post('/api/reviews/addReview', {
    gid: route.query.gid,
    parent_id: item.rvid,
    userid: sessionStorage.getItem('userid'),
    contents: item.replyContent
  }).then(res => {
    if (res.data.code == 200) {
      alert('回复成功')
      item.replyContent = '' // 清空回复内容
      item.showReplyForm = false // 关闭回复表单
      // 更新嵌套回复列表
      item.replies.push({
        truename: '你', // 假设当前用户为“你”，实际应从登录状态获取
        created_at: new Date().toISOString(),
        contents: item.replyContent
      })
    } else {
      alert(res.data.msg)
    }
  }).catch(err => {
    console.error(err)
    alert('提交回复失败')
  })
}
</script>

<style lang="scss" scoped>
.mi-review-container {
  padding: 16px;
  background-color: #f5f5f5;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;

  .mi-review-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    .mi-review-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .user-info {
        display: flex;
        align-items: center;

        .user-name {
          font-size: 15px;
          font-weight: 500;
          color: #333;
          margin-right: 10px;
        }

        .review-date {
          font-size: 12px;
          color: #999;
        }
      }

      .review-image {
        width: 100px; // 设置图片宽度
        height: 100px; // 设置图片高度
        object-fit: cover; // 图片裁剪方式
        border-radius: 8px; // 图片圆角
        border: 1px solid #ddd; // 图片边框
        margin-left: 10px; // 图片左边距
      }

      .user-tag {
        background-color: #ff6700;
        color: white;
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 4px;
      }
    }

    .mi-review-content {
      font-size: 14px;
      line-height: 1.6;
      color: #333;
      margin-bottom: 12px;
    }

    .mi-review-replies {
      margin-top: 12px;
      padding-left: 20px;

      .mi-reply-card {
        background-color: #f0f0f0;
        border-radius: 4px;
        padding: 8px;
        margin-bottom: 8px;

        .mi-reply-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 4px;

          .user-name {
            font-size: 14px;
            font-weight: 500;
            color: #666;
          }

          .reply-date {
            font-size: 12px;
            color: #999;
          }
        }

        .mi-reply-content {
          font-size: 14px;
          line-height: 1.4;
          color: #333;
        }
      }
    }

    .mi-review-reply-form {
      margin-top: 12px;
      display: flex;
      flex-direction: column;

      .reply-textarea {
        width: 100%;
        height: 80px;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 8px;
        resize: vertical;
        font-size: 14px;
        line-height: 1.6;
        color: #333;
      }

      .reply-submit-btn {
        background-color: #ff6700;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;

        &:hover {
          background-color: #e65c00;
        }
      }
    }

    .mi-review-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;

      .review-id {
        font-size: 12px;
        color: #999;

        .user-location {
          margin-left: 10px;
        }
      }

      .review-actions {
        .reply-btn {
          background: none;
          border: 1px solid #ddd;
          color: #666;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 8px;
          cursor: pointer;

          &:hover {
            background-color: #f5f5f5;
          }
        }
      }
    }
  }
}
</style>
